JSP_json实现jsp分页实例介绍(附效果图),json 在上篇文章已有详细介绍
response.getWriter().println(message);
$(":button:eq(1)").removeAttr('disabled');
$("table").append($tr);
}
return password;
<base href="https://www.xp.cn/<%=basePath%>">
}
public int getAge() {
public static final int PER_PAGE = 3;
}else{
}
list.add(new User(6,"d","a",34));
<meta http-equiv="cache-control" content="no-cache">
super();
package servlet;
var paging = 0;
<body>
import java.io.IOException;
json 在上篇文章已有详细介绍,json的既简单易懂,又传输迅速。并且能和javascript很好的融为一体。
2.创建一个字符串,向内依次添加 从数据库DB 得到的user,并将所有数据封装
首先:编写一个javaBean User.java
//回调函数
list.add(new User(3,"a","h",34));
import javax.servlet.http.HttpServlet;
复制代码 代码如下:
}@Override
</head>
}else{
return name;
}
list.add(new User(8,"f","e",34));
在不需要添加jar的前提下,能够很好完成jsp分页问题。
public User(int id, String name, String password, int age) {
}else{
if(page >= 1 && page <= 3){
message = sb.substring(0, sb.length()-1)+"]";
复制代码 代码如下:
int length = 0;//记录当前拿了多少条createXmlHttpRequest();
private String password;
super();
public void setAge(int age) {
String path = request.getContextPath();
}
[{},{},{}]
import java.util.LinkedList;
}
paging ++;
}
效果如图所示,采用jsp+servlet技术
protected void service(HttpServletRequest request, HttpServletResponse response)
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.xp.cn/";
import bean.User;
var url = encodeURI("/json_page/Paging?page="+paging);
//分页 数据源 当前得到第几页的记录 每页显示多少条
message = sb.toString()+"]";
}
}
<script type="text/javascript" src="https://www.xp.cn/js/jquery-1.4.4.js"></script>
public String getPassword() {
this.id = id;
<%
response.setContentType("text/html;charset=utf-8");
// page = 1 i = 0
sb.append("[");
return id;
下面具体介绍分页实例:
response.setContentType("text/html;charset=utf-8");
public String toString() {
}
public class Paging extends HttpServlet {
$(":button:eq(0)").removeAttr('disabled');
$("table").append( $("<tr><td>id</td><td>用户名</td><td>密码</td><td>age</td></tr>"));
int page = Integer.parseInt(request.getParameter("page"));
</html>
xmlHttpRequest.open("GET",url,true);
this.name = name;
}
}
var persons = mgs.evalJSON();
$(":button:eq(0)").attr('disabled','disabled');
另外:要有这两个js哦
public class User {
if(paging > 1){
this.id = id;
class DB{
list.add(new User(7,"e","d",34));
xmlHttpRequest = new XmlHttpRequest();
//[{},{},{}]
this.age = age;
<script type="text/javascript">
}else if(p == 'last' && paging > 1){
<meta http-equiv="pragma" content="no-cache">
import javax.servlet.http.HttpServletRequest;
/*if(p == 'next' && paging < 3){
alert('错误');
}
if(window.ActiveXObject){
import java.io.PrintWriter;
this.name = name;
function page(p){
if(paging == 3){
var mgs = xmlHttpRequest.responseText;
3.将此字符串 返回到请求页面
@Override
import javax.servlet.http.HttpServletResponse;
paging --;
<head>
这里需要注意的 就是 toString的方法的改变
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
//page = 2 3
}else{
$(":button:eq(1)").attr('disabled','disabled');
}
public void setId(int id) {
return age;
sb.append(u.toString()+",");
}
import javax.servlet.ServletException;
list.add(new User(9,"g","a",34));
}
//假设名字为xmlHttpRequest
list.add(new User(1,"zhangsan","zs",34));
if(length > 0){
this.password = password;
response.getWriter().println("捣乱");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>My JSP 'regist.jsp' starting page</title>
<script type="text/javascript" src="https://www.xp.cn/js/prototype1.6.js"></script>
<meta http-equiv="description" content="This is my page">
<html>
User u = DB.list.get(i);
}
xmlHttpRequest.send(null);
//{'id':1,'name':'zhangsan','password':'123','age':1}
throws ServletException, IOException {
}
}
可以看到,
for (int i = (page-1)*PER_PAGE; i < DB.list.size()&&length < PER_PAGE; i++) {
<tr><td>id</td><td>用户名</td><td>密码</td><td>age</td></tr>
//alert(mgs);
$("table").empty();
list.add(new User(5,"c","g",34));
之后 :jsp的填写,通过ajax异步提交page,然后得到相应的字符串
String message = null;
}
var $tr = $("<tr><td>"+person.id+"</td><td>"+person.name+"</td><td>"+person.password+"</td><td>"+person.age+"</td></tr>");
</script>
this.age = age;
for(var i = 0 ; i < persons.length;i++){
xmlHttpRequest.onreadystatechange=back;
static{
if( xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
function createXmlHttpRequest(){
private int id;
复制代码 代码如下:
return "{'id':"+id+",'name':'"+name+"','password':'"+password+"','age':"+age+"}";public void setName(String name) {
var person = persons[i];
public void setPassword(String password) {
public int getId() {
//
}
}
public String getName() {
然后:我们来编写它的control 层和Dao层
}
复制代码 代码如下:
为了简化代码,便于取值,数据库暂写为一个集合function back(){
var mgs = xmlHttpRequest.responseText;
list.add(new User(2,"lisi","ls",34));
if(paging == 1){
if(p == 'next' && paging < 3){
}
var persons = mgs.evalJSON();
public static List<User> list = new LinkedList<User>();
<table>
<script type="text/javascript" src="https://www.xp.cn/js/prototype1.6.js"></script>
}
list.add(new User(4,"b","d",34));
StringBuffer sb = new StringBuffer();
paging --;
}
public User() {
}
private int age;
复制代码 代码如下:
length++;this.password = password;
<meta http-equiv="expires" content="0">
return;
import java.util.List;
%>
<input type="button" disabled="disabled" value="上一页"/><input type="button" value="下一页" onclick = "page('next');"/>
private String name;
</body>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
package bean;
}else if(p == 'last' && paging > 1) {
}*/
paging ++;
<script type="text/javascript" src="https://www.xp.cn/js/jquery-1.4.4.js"></script>
复制代码 代码如下:
1.service 接收request请求 得到页面所要展示当前页(为第page页)
</table>
}
本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!
本文地址: https://v30.fanwenzhu.com/jiaob/jsp/7092.shtml
